<template>
  <BasicModal
    title="医护人员信息详情"
    v-bind="$attrs"
    @register="register"
    :showOkBtn="false"
    :showCancelBtn="false"
    destroyOnClose
  >
    <div class="pt-3px pr-3px pesonnel-description">
      <Description :column="1" :data="descriptionData" :schema="schemaDescription" />
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, h } from 'vue';
  import { Image } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Description, DescItem, useDescription } from '/@/components/Description/index';
  import { maleOptions, personTypeOptions } from './config.data';

  const host = import.meta.env.DEV ? import.meta.env.VITE_FILE_PREFIX : '';
  const imgRender = (val) =>
    h(Image, {
      class: '!w-auto !h-full',
      width: 106,
      height: 148,
      src: `${host}${val}`,
      fallback:
        '',
    });

  const customRender = (states: LabelValueOptions) => (val) => {
    const match = states.find((x) => x.value == val);
    if (!match) return;
    return match.label;
  };

  const emptyRender = (val) => (val ? val : '-');

  const descriptionData = ref([]);
  const schemaDescription: DescItem[] = [
    {
      field: 'staff_avatar',
      label: '照片',
      render: imgRender,
    },
    {
      field: 'partition_name',
      label: '病区',
    },
    {
      field: 'staff_number',
      label: '工号',
    },
    {
      field: 'staff_name',
      label: '姓名',
    },
    {
      field: 'staff_sex',
      label: '性别',
      render: customRender(maleOptions),
    },
    {
      field: 'position_name',
      label: '职级',
    },
    {
      field: 'staff_type',
      label: '类型',
      render: customRender(personTypeOptions),
    },

    {
      field: 'staff_age',
      label: '年龄',
      render: (val) => (val ? `${val} 岁` : '无'),
    },
    {
      field: 'staff_nation',
      label: '民族',
      render: emptyRender,
    },
    {
      field: 'staff_telphone',
      label: '电话',
      render: emptyRender,
    },
    {
      field: 'staff_address',
      label: '居住地址',
      render: emptyRender,
    },
    {
      field: 'remarks',
      label: '备注',
      render: emptyRender,
    },
  ];

  useDescription({
    title: 'useDescription',
    data: descriptionData,
    schema: schemaDescription,
  });

  const [register, {}] = useModalInner((data) => {
    descriptionData.value = data.record;
  });
</script>
<style lang="less">
  .pesonnel-description {
    .ant-image {
      display: flex;
      align-items: center;
    }

    .ant-descriptions-item-label {
      width: 90px;
    }
  }
</style>
